<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/5demo.css">
</head>
<body>
    <div class="box">
        <h3>来 , 说说你在做什么 , 想什么</h3>
        <div class="header">
            <input type="text" placeholder="请输入用户名" class="userName">
            <span><img src="./img/1.png" alt=""></span>
            <span><img src="./img/2.png" alt=""></span>
            <span><img src="./img/3.png" alt=""></span>
            <span><img src="./img/4.png" alt=""></span>
        </div> 

        <div class="sayCon">
            <!-- maxlength 可输入最大字符长度个数 -->
            <textarea class="userSay" maxlength="40"></textarea>
            <p>还可以输入<span class="countNum">40</span>个字 <button class="publish">广播</button></p>
        </div>

        <div class="comment">
            <div class="says">
                <span class="tit">大家在说</span>
                <span class="pl">收起评论</span>
                <span class="num">0</span>
            </div>
            <div class="con show">
                <dl>
                    <dt><img src="./img/1.png" alt=""></dt>
                    <dd>
                        <h4><a href="#">用户名:</a> 留的言</h4>
                        <p>01月15日 15:21  发布日期 <span class="del">删除</span></p>
                    </dd>
                </dl>
            </div>
        </div>
    </div>
    
    <script src="./js/5demo.js"></script>
</body>
</html>